<template>
    <view>
        <!-- 内容区，可监听一次用户的返回操作 -->
        <page-container :show="showPageContainer" :duration="0" @beforeleave="handleBeforeLeave">
            <ContentArea @handleBack="handleBeforeLeave" />
        </page-container>
        <!-- 内容区 -->
        <ContentArea @handleBack="handleBeforeLeave" />
        <!-- 退出提示弹窗 -->
        <ExitPopup :show="isPopupVisible" @close="isPopupVisible = false" />
    </view>
</template>

<script setup>
/**
 * @description 问卷调查页面，用户完善信息后进入的页面，当前页面增加了退出提示弹窗，page-container还可监听一次用户的返回操作包含手势、物理按键返回等。
 * @author yinzhi
 * @date 2025-03-11
 */
import { onLoad, onUnload } from '@dcloudio/uni-app'
import { ref, defineComponent } from 'vue'
import { useStore } from 'vuex'
import ContentArea from './components/ContentArea.vue'
import ExitPopup from './components/ExitPopup.vue'
// 引入组件
defineComponent({
    components: {
        ContentArea,
        ExitPopup
    }
})

// 退出弹窗显示
const isPopupVisible = ref(false)
// 组件是否显示
const showPageContainer = ref(true)

// 拦截返回事件（手势/物理返回键等） 但是只能监听一次
const handleBeforeLeave = e => {
    isPopupVisible.value = true // 显示退出弹窗
    return false // 阻止默认返回行为
}

const store = useStore()

// 页面销毁时清除vuex中的数据,如果需要保留数据，请移除相关代码(如果问卷问题不会更改的情况，否则最好清除)。
onUnload(() => {
    store.commit('questionnaire/clearDate')
})
</script>

<style scoped lang="scss"></style>
